﻿function MyNote(x,y,text,keyName){
	this.keyName=keyName;
	this.x=x;
	this.y=y;
	this.text=text;
	this.noteDiv=cEle('div');
	this.noteDiv.head=this.noteDiv.appendChild(cEle('div'));
	this.noteDiv.content=this.noteDiv.appendChild(cEle('div'));
	this.noteDiv.head.noteTitle=this.noteDiv.head.appendChild(cEle('nobr'));
	this.noteDiv.head.closeButton=this.noteDiv.head.appendChild(cEle('nobr'));
	this.show(storage);
}
MyNote.prototype.addToStorage=function(storage){
	var path={},temp={};			//just call for add notes  not for update or delete
	temp.keyName=this.keyName;
	temp.x=this.x;
	temp.y=this.y;
	temp.text=this.text;
	path[temp.keyName]=temp;//save notes to path
	if(storage[location.pathname]==null){
		storage[location.pathname]=path;
	}
	else{
		$.extend(storage[location.pathname],path);
	}//save path to storage
};
MyNote.prototype.removeNoteFromStorage=function(storage){
	var path={};
	path=storage[location.pathname];
	if(path!=null){
		delete path[this.keyName];
		storage[location.pathname]=path;//update the localStorage.pathname
	}
};
MyNote.prototype.show=function(storage){
	var tempTime=new Date(parseInt(this.keyName)),note=this;
	$('body:first').append(note.noteDiv);
	note.noteDiv.className='wxz-noteDiv';
	note.noteDiv.style.position='absolute';
	note.noteDiv.style.left=this.x+'px';
	note.noteDiv.style.top=this.y+'px';
	$(note.noteDiv).draggable({ handle: note.noteDiv.head,addClasses: false,stop: function( event, ui ) {note.save(storage);}});//make it draggable and save when drag stop
		note.noteDiv.head.className='wxz-noteDiv-head';
			note.noteDiv.head.noteTitle.className='wxz-noteDiv-head-title';
			note.noteDiv.head.noteTitle.innerHTML=tempTime.toDateString();
			note.noteDiv.head.closeButton.className='wxz-noteDiv-head-close';
			note.noteDiv.head.closeButton.innerHTML='x';
			$(note.noteDiv.head.closeButton).click(function(){note.close(storage);});//listen the click event
		note.noteDiv.content.className='wxz-noteDiv-content';
		note.noteDiv.content.innerHTML=note.text;
		note.noteDiv.content.contentEditable=true;
		$(note.noteDiv.content).blur(function(){note.save(storage);});//save when it lost focus
};
MyNote.prototype.upDate=function(){
	this.x=$(this.noteDiv).offset().left;
	this.y=$(this.noteDiv).offset().top;
	this.text=this.noteDiv.content.innerHTML;
}
MyNote.prototype.close=function(storage){
	if(confirm("Do you like to delete the note？")){
		$(this.noteDiv).remove();
		this.del(storage);
	}
};
MyNote.prototype.save=function(storage){
	this.upDate();
	this.addToStorage(storage);
	STOupdate(storage);
};
MyNote.prototype.del=function(storage){
	this.removeNoteFromStorage(storage);
	STOupdate(storage);
};

function loadNotes(storage){
	if(storage[location.pathname]!=null){
		var node=storage[location.pathname],e,note,key;
		for(key in node){
			e=node[key];
			note=new MyNote(e.x,e.y,e.text,e.keyName);
		}
	}
}
function closeNotes(){
	$("wxz-noteDiv").css({
					'display':'none'
					});
}
function showNotes(){
	$("wxz-noteDiv").css({
					'display':'inline'
					});
}

var storage=STOget();
loadNotes(storage);
$("body").mousedown(function(e){ 
	if(e.shiftKey){
		var x,y,keyName;
		x=e.pageX;
		y=e.pageY;
		keyName=e.timeStamp;
		var note =new MyNote(x,y,'',keyName);
	}
});
